<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>排队取号管理系统 - 管理员端</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            info: '#4E5969',
            light: '#F2F3F5',
            dark: '#1D2129'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .number-card {
        @apply bg-white rounded-xl shadow-md p-4 transition-all duration-300 hover:shadow-lg cursor-pointer border-2;
      }
      .number-card-selected {
        @apply border-primary ring-2 ring-primary/20;
      }
      .status-badge {
        @apply text-xs px-2 py-1 rounded-full font-medium;
      }
      .btn-action {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    }
  </style>
</head>

<body class="bg-gray-50 min-h-screen font-sans text-dark">
  <!-- 顶部导航栏 -->
  <header class="bg-primary text-white shadow-md fixed top-0 left-0 right-0 z-50">
    <div class="container mx-auto px-6 py-4 flex justify-between items-center">
      <div class="flex items-center space-x-3">
        <i class="fa fa-ticket text-2xl" aria-hidden="true"></i>
        <h1 class="text-xl md:text-2xl font-bold">排队取号管理系统</h1>
      </div>
      
      <div class="flex items-center space-x-6">
        <div class="hidden md:flex items-center space-x-2">
          <span class="bg-white/20 px-3 py-1 rounded-full text-sm">
            门店 ID: <span class="font-bold">002</span>
          </span>
        </div>
        
        <div class="flex items-center space-x-1">
          <i class="fa fa-user-circle text-xl" aria-hidden="true"></i>
          <span class="hidden md:inline">管理员</span>
        </div>
      </div>
    </div>
  </header>

  <!-- 主要内容区 -->
  <main class="container mx-auto pt-24 pb-20 px-4 md:px-6">
    <!-- 统计信息卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-white rounded-xl shadow-md p-6 transform transition-all duration-300 hover:scale-[1.02]">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-info text-sm mb-1">当前排队总数</p>
            <h3 class="text-3xl font-bold text-dark" id="total-queue">12</h3>
          </div>
          <div class="bg-primary/10 p-3 rounded-lg">
            <i class="fa fa-users text-primary text-xl" aria-hidden="true"></i>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-success flex items-center">
            <i class="fa fa-arrow-up mr-1" aria-hidden="true"></i> 3 人
          </span>
          <span class="text-gray-400 ml-2">较昨日</span>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-md p-6 transform transition-all duration-300 hover:scale-[1.02]">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-info text-sm mb-1">正在处理</p>
            <h3 class="text-3xl font-bold text-dark" id="processing">2</h3>
          </div>
          <div class="bg-warning/10 p-3 rounded-lg">
            <i class="fa fa-spinner text-warning text-xl" aria-hidden="true"></i>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-danger flex items-center">
            <i class="fa fa-arrow-up mr-1" aria-hidden="true"></i> 1 人
          </span>
          <span class="text-gray-400 ml-2">较昨日</span>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-md p-6 transform transition-all duration-300 hover:scale-[1.02]">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-info text-sm mb-1">今日已完成</p>
            <h3 class="text-3xl font-bold text-dark" id="completed">48</h3>
          </div>
          <div class="bg-success/10 p-3 rounded-lg">
            <i class="fa fa-check-circle text-success text-xl" aria-hidden="true"></i>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-success flex items-center">
            <i class="fa fa-arrow-up mr-1" aria-hidden="true"></i> 12 人
          </span>
          <span class="text-gray-400 ml-2">较昨日</span>
        </div>
      </div>
    </div>
    
    <!-- 操作区和筛选区 -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
      <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
        <h2 class="text-xl font-bold">排队号码列表</h2>
        
        <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
          <div class="relative">
            <select id="status-filter" class="appearance-none bg-light border-0 rounded-lg pl-4 pr-10 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary/30 w-full sm:w-auto">
              <option value="all">全部状态</option>
              <option value="0">等待中</option>
              <option value="1">处理中</option>
              <option value="2">已完成</option>
              <option value="3">已取消</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
              <i class="fa fa-chevron-down text-xs" aria-hidden="true"></i>
            </div>
          </div>
          
          <div class="relative">
            <select id="type-filter" class="appearance-none bg-light border-0 rounded-lg pl-4 pr-10 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary/30 w-full sm:w-auto">
              <option value="all">全部类型</option>
              <option value="A">A类</option>
              <option value="B">B类</option>
              <option value="C">C类</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
              <i class="fa fa-chevron-down text-xs" aria-hidden="true"></i>
            </div>
          </div>
          
          <button id="manual-ticket-btn" class="btn-action bg-primary text-white hover:bg-primary/90 focus:ring-primary/50 flex items-center justify-center gap-2 w-full sm:w-auto">
            <i class="fa fa-plus" aria-hidden="true"></i>
            <span>手动取号</span>
          </button>
        </div>
      </div>
      
      <!-- 选中号码操作区 -->
      <div id="selected-actions" class="hidden bg-light rounded-lg p-4 mb-6">
        <div class="flex flex-wrap items-center gap-3">
          <p class="text-sm font-medium">已选中: <span id="selected-count">0</span> 个号码</p>
          <div class="ml-auto flex flex-wrap gap-2">
            <button id="process-btn" class="btn-action bg-warning text-white hover:bg-warning/90 focus:ring-warning/50 text-sm px-3 py-1.5">
              <i class="fa fa-spinner mr-1" aria-hidden="true"></i> 开始处理
            </button>
            <button id="complete-btn" class="btn-action bg-success text-white hover:bg-success/90 focus:ring-success/50 text-sm px-3 py-1.5">
              <i class="fa fa-check mr-1" aria-hidden="true"></i> 标记完成
            </button>
            <button id="cancel-btn" class="btn-action bg-danger text-white hover:bg-danger/90 focus:ring-danger/50 text-sm px-3 py-1.5">
              <i class="fa fa-times mr-1" aria-hidden="true"></i> 取消排队
            </button>
            <button id="clear-selection-btn" class="btn-action bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400/50 text-sm px-3 py-1.5">
              <i class="fa fa-eraser mr-1" aria-hidden="true"></i> 清除选择
            </button>
          </div>
        </div>
      </div>
      
      <!-- 号码列表 -->
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead>
            <tr>
              <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-info uppercase tracking-wider rounded-tl-lg">
                <input type="checkbox" id="select-all" class="rounded text-primary focus:ring-primary/50">
              </th>
              <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-info uppercase tracking-wider">号码</th>
              <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-info uppercase tracking-wider">类型</th>
              <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-info uppercase tracking-wider">状态</th>
              <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-info uppercase tracking-wider">取号时间</th>
              <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-info uppercase tracking-wider">联系电话</th>
              <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-info uppercase tracking-wider rounded-tr-lg">操作</th>
            </tr>
          </thead>
          <tbody id="queue-list" class="bg-white divide-y divide-gray-200">
            <!-- 号码数据将通过JavaScript动态生成 -->
          </tbody>
        </table>
      </div>
      
      <!-- 分页控件 -->
      <div class="mt-6 flex flex-col sm:flex-row justify-between items-center gap-4">
        <div class="text-sm text-info">
          显示 <span id="showing-range">1-10</span> 条，共 <span id="total-count">42</span> 条
        </div>
        
        <div class="flex items-center space-x-1">
          <button id="prev-page" class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-info hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
            <i class="fa fa-chevron-left text-xs" aria-hidden="true"></i>
          </button>
          
          <button class="w-9 h-9 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
          <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-info hover:bg-gray-50">2</button>
          <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-info hover:bg-gray-50">3</button>
          <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-info hover:bg-gray-50">4</button>
          <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-info hover:bg-gray-50">5</button>
          
          <button id="next-page" class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-info hover:bg-gray-50">
            <i class="fa fa-chevron-right text-xs" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-4 fixed bottom-0 left-0 right-0 z-40">
    <div class="container mx-auto px-6 text-center text-sm text-info">
      <p>© 2025 排队取号管理系统 | 版本 v1.0.0</p>
    </div>
  </footer>

  <!-- 手动取号弹窗 -->
  <div id="manual-ticket-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
      <div class="p-6 border-b border-gray-200">
        <div class="flex justify-between items-center">
          <h3 class="text-xl font-bold">手动取号</h3>
          <button id="close-modal" class="text-gray-400 hover:text-gray-500">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
        </div>
      </div>
      
      <div class="p-6">
        <form id="manual-ticket-form">
          <div class="mb-4">
            <label for="ticket-type" class="block text-sm font-medium text-gray-700 mb-1">号码类型</label>
            <div class="relative">
              <select id="ticket-type" name="type" class="appearance-none w-full bg-light border-0 rounded-lg pl-4 pr-10 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary/30">
                <option value="A">A类</option>
                <option value="B">B类</option>
                <option value="C">C类</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                <i class="fa fa-chevron-down text-xs" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          
          <div class="mb-4">
            <label for="phone-number" class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-500">
                <i class="fa fa-phone" aria-hidden="true"></i>
              </span>
              <input type="tel" id="phone-number" name="phone" placeholder="请输入手机号码" 
                class="w-full bg-light border-0 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary/30"
                pattern="1[3-9]\d{9}" required>
            </div>
          </div>
          
          <div class="mt-6">
            <button type="submit" class="w-full btn-action bg-primary text-white hover:bg-primary/90 focus:ring-primary/50">
              生成号码
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 通知提示 -->
  <div id="toast" class="fixed bottom-20 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center gap-2 z-50">
    <i id="toast-icon" class="fa fa-check-circle" aria-hidden="true"></i>
    <span id="toast-message">操作成功</span>
  </div>

  <script>
    // 模拟数据
    const queueData = [
      {
        "id": "36e0d2f47f6fc17c",
        "code": 4,
        "shopId": "002",
        "status": 0,
        "createdOn": "2025-09-04T17:47:39",
        "type": "A",
        "date": 20250904,
        "phone": "18521502147",
        "userId": "",
        "alarmTimes": 0
      },
      {
        "id": "36e0d2f47f6fc17d",
        "code": 5,
        "shopId": "002",
        "status": 0,
        "createdOn": "2025-09-04T17:50:12",
        "type": "B",
        "date": 20250904,
        "phone": "13812345678",
        "userId": "",
        "alarmTimes": 0
      },
      {
        "id": "36e0d2f47f6fc17e",
        "code": 6,
        "shopId": "002",
        "status": 1,
        "createdOn": "2025-09-04T17:53:45",
        "type": "A",
        "date": 20250904,
        "phone": "13987654321",
        "userId": "",
        "alarmTimes": 0
      },
      {
        "id": "36e0d2f47f6fc17f",
        "code": 7,
        "shopId": "002",
        "status": 0,
        "createdOn": "2025-09-04T17:55:33",
        "type": "C",
        "date": 20250904,
        "phone": "13567890123",
        "userId": "",
        "alarmTimes": 1
      },
      {
        "id": "36e0d2f47f6fc180",
        "code": 8,
        "shopId": "002",
        "status": 2,
        "createdOn": "2025-09-04T17:58:21",
        "type": "A",
        "date": 20250904,
        "phone": "13654327890",
        "userId": "",
        "alarmTimes": 0
      },
      {
        "id": "36e0d2f47f6fc181",
        "code": 9,
        "shopId": "002",
        "status": 3,
        "createdOn": "2025-09-04T18:01:09",
        "type": "B",
        "date": 20250904,
        "phone": "13789012345",
        "userId": "",
        "alarmTimes": 2
      },
      {
        "id": "36e0d2f47f6fc182",
        "code": 10,
        "shopId": "002",
        "status": 0,
        "createdOn": "2025-09-04T18:03:57",
        "type": "A",
        "date": 20250904,
        "phone": "13423456789",
        "userId": "",
        "alarmTimes": 0
      },
      {
        "id": "36e0d2f47f6fc183",
        "code": 11,
        "shopId": "002",
        "status": 0,
        "createdOn": "2025-09-04T18:06:45",
        "type": "C",
        "date": 20250904,
        "phone": "13345678901",
        "userId": "",
        "alarmTimes": 0
      },
      {
        "id": "36e0d2f47f6fc184",
        "code": 12,
        "shopId": "002",
        "status": 1,
        "createdOn": "2025-09-04T18:09:33",
        "type": "B",
        "date": 20250904,
        "phone": "13267890123",
        "userId": "",
        "alarmTimes": 0
      },
      {
        "id": "36e0d2f47f6fc185",
        "code": 13,
        "shopId": "002",
        "status": 0,
        "createdOn": "2025-09-04T18:12:21",
        "type": "A",
        "date": 20250904,
        "phone": "13189012345",
        "userId": "",
        "alarmTimes": 0
      }
    ];

    // 状态映射
    const statusMap = {
      0: { text: '等待中', class: 'bg-blue-100 text-blue-800' },
      1: { text: '处理中', class: 'bg-yellow-100 text-yellow-800' },
      2: { text: '已完成', class: 'bg-green-100 text-green-800' },
      3: { text: '已取消', class: 'bg-red-100 text-red-800' }
    };

    // 类型映射
    const typeMap = {
      'A': { class: 'bg-primary/10 text-primary' },
      'B': { class: 'bg-warning/10 text-warning' },
      'C': { class: 'bg-secondary/10 text-secondary' }
    };

    // 格式化时间
    function formatDateTime(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
    }

    // 渲染排队列表
    function renderQueueList(data) {
      const queueList = document.getElementById('queue-list');
      queueList.innerHTML = '';

      if (data.length === 0) {
        queueList.innerHTML = `
          <tr>
            <td colspan="7" class="px-4 py-8 text-center text-info">
              <div class="flex flex-col items-center">
                <i class="fa fa-inbox text-4xl mb-2 text-gray-300" aria-hidden="true"></i>
                <p>当前没有排队号码</p>
              </div>
            </td>
          </tr>
        `;
        return;
      }

      data.forEach(item => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50 transition-colors';
        row.dataset.id = item.id;
        
        // 格式化电话号码，中间四位用*代替
        const formattedPhone = item.phone ? 
          item.phone.substr(0, 3) + '****' + item.phone.substr(7) : 
          '未提供';

        row.innerHTML = `
          <td class="px-4 py-4 whitespace-nowrap">
            <input type="checkbox" class="queue-item-select rounded text-primary focus:ring-primary/50" data-id="${item.id}">
          </td>
          <td class="px-4 py-4 whitespace-nowrap">
            <div class="font-medium text-dark">${item.type}-${item.code}</div>
          </td>
          <td class="px-4 py-4 whitespace-nowrap">
            <span class="status-badge ${typeMap[item.type].class}">${item.type}类</span>
          </td>
          <td class="px-4 py-4 whitespace-nowrap">
            <span class="status-badge ${statusMap[item.status].class}">${statusMap[item.status].text}</span>
          </td>
          <td class="px-4 py-4 whitespace-nowrap text-sm text-info">
            ${formatDateTime(item.createdOn)}
          </td>
          <td class="px-4 py-4 whitespace-nowrap text-sm">
            ${formattedPhone}
          </td>
          <td class="px-4 py-4 whitespace-nowrap text-sm">
            <div class="flex space-x-2">
              ${item.status === 0 ? `
                <button class="process-action text-warning hover:text-warning/80" data-id="${item.id}" title="开始处理">
                  <i class="fa fa-spinner" aria-hidden="true"></i>
                </button>
              ` : ''}
              
              ${(item.status === 0 || item.status === 1) ? `
                <button class="complete-action text-success hover:text-success/80" data-id="${item.id}" title="标记完成">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </button>
              ` : ''}
              
              ${(item.status === 0 || item.status === 1) ? `
                <button class="cancel-action text-danger hover:text-danger/80" data-id="${item.id}" title="取消排队">
                  <i class="fa fa-times" aria-hidden="true"></i>
                </button>
              ` : ''}
              
              <button class="detail-action text-primary hover:text-primary/80" data-id="${item.id}" title="查看详情">
                <i class="fa fa-info-circle" aria-hidden="true"></i>
              </button>
            </div>
          </td>
        `;
        
        queueList.appendChild(row);
      });

      // 添加事件监听
      addEventListeners();
      updateSelectedCount();
    }

    // 添加事件监听器
    function addEventListeners() {
      // 选择框事件
      document.querySelectorAll('.queue-item-select').forEach(checkbox => {
        checkbox.addEventListener('change', handleItemSelect);
      });

      // 全选事件
      document.getElementById('select-all').addEventListener('change', handleSelectAll);

      // 操作按钮事件
      document.querySelectorAll('.process-action').forEach(btn => {
        btn.addEventListener('click', () => handleStatusChange(btn.dataset.id, 1));
      });
      
      document.querySelectorAll('.complete-action').forEach(btn => {
        btn.addEventListener('click', () => handleStatusChange(btn.dataset.id, 2));
      });
      
      document.querySelectorAll('.cancel-action').forEach(btn => {
        btn.addEventListener('click', () => handleStatusChange(btn.dataset.id, 3));
      });
      
      document.querySelectorAll('.detail-action').forEach(btn => {
        btn.addEventListener('click', () => showDetail(btn.dataset.id));
      });
      
      // 批量操作按钮
      document.getElementById('process-btn').addEventListener('click', () => batchStatusChange(1));
      document.getElementById('complete-btn').addEventListener('click', () => batchStatusChange(2));
      document.getElementById('cancel-btn').addEventListener('click', () => batchStatusChange(3));
      document.getElementById('clear-selection-btn').addEventListener('click', clearSelection);
      
      // 手动取号按钮
      document.getElementById('manual-ticket-btn').addEventListener('click', openManualTicketModal);
      document.getElementById('close-modal').addEventListener('click', closeManualTicketModal);
      
      // 手动取号表单提交
      document.getElementById('manual-ticket-form').addEventListener('submit', handleManualTicketSubmit);
      
      // 筛选器变化
      document.getElementById('status-filter').addEventListener('change', applyFilters);
      document.getElementById('type-filter').addEventListener('change', applyFilters);
      
      // 分页按钮
      document.getElementById('prev-page').addEventListener('click', goToPrevPage);
      document.getElementById('next-page').addEventListener('click', goToNextPage);
    }

    // 处理项目选择
    function handleItemSelect() {
      updateSelectedCount();
      
      // 检查是否所有项目都被选中
      const allCheckboxes = document.querySelectorAll('.queue-item-select');
      const checkedCheckboxes = document.querySelectorAll('.queue-item-select:checked');
      document.getElementById('select-all').checked = allCheckboxes.length === checkedCheckboxes.length && allCheckboxes.length > 0;
    }

    // 处理全选
    function handleSelectAll(e) {
      const isChecked = e.target.checked;
      document.querySelectorAll('.queue-item-select').forEach(checkbox => {
        checkbox.checked = isChecked;
      });
      updateSelectedCount();
    }

    // 更新选中计数
    function updateSelectedCount() {
      const selectedCount = document.querySelectorAll('.queue-item-select:checked').length;
      document.getElementById('selected-count').textContent = selectedCount;
      
      if (selectedCount > 0) {
        document.getElementById('selected-actions').classList.remove('hidden');
      } else {
        document.getElementById('selected-actions').classList.add('hidden');
      }
    }

    // 处理状态变更
    function handleStatusChange(id, status) {
      // 在实际应用中，这里会发送API请求到后端
      // 这里使用模拟数据
      const itemIndex = queueData.findIndex(item => item.id === id);
      if (itemIndex !== -1) {
        queueData[itemIndex].status = status;
        showToast(`已将号码标记为${statusMap[status].text}`, 'success');
        applyFilters(); // 重新应用筛选器以刷新列表
      }
    }

    // 批量状态变更
    function batchStatusChange(status) {
      const selectedIds = Array.from(document.querySelectorAll('.queue-item-select:checked'))
        .map(checkbox => checkbox.dataset.id);
      
      if (selectedIds.length === 0) return;
      
      // 在实际应用中，这里会发送API请求到后端
      // 这里使用模拟数据
      selectedIds.forEach(id => {
        const itemIndex = queueData.findIndex(item => item.id === id);
        if (itemIndex !== -1) {
          queueData[itemIndex].status = status;
        }
      });
      
      showToast(`已将${selectedIds.length}个号码标记为${statusMap[status].text}`, 'success');
      clearSelection();
      applyFilters(); // 重新应用筛选器以刷新列表
    }

    // 清除选择
    function clearSelection() {
      document.querySelectorAll('.queue-item-select:checked').forEach(checkbox => {
        checkbox.checked = false;
      });
      document.getElementById('select-all').checked = false;
      updateSelectedCount();
    }

    // 显示详情
    function showDetail(id) {
      const item = queueData.find(item => item.id === id);
      if (item) {
        // 在实际应用中，这里会显示详细信息弹窗
        alert(`
          号码详情:
          号码: ${item.type}-${item.code}
          类型: ${item.type}类
          状态: ${statusMap[item.status].text}
          取号时间: ${formatDateTime(item.createdOn)}
          联系电话: ${item.phone || '未提供'}
          提醒次数: ${item.alarmTimes}
        `);
      }
    }

    // 打开手动取号弹窗
    function openManualTicketModal() {
      const modal = document.getElementById('manual-ticket-modal');
      const modalContent = document.getElementById('modal-content');
      
      modal.classList.remove('hidden');
      // 触发重排后添加动画类
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
      
      // 清空表单
      document.getElementById('manual-ticket-form').reset();
    }

    // 关闭手动取号弹窗
    function closeManualTicketModal() {
      const modal = document.getElementById('manual-ticket-modal');
      const modalContent = document.getElementById('modal-content');
      
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      
      setTimeout(() => {
        modal.classList.add('hidden');
      }, 300);
    }

    // 处理手动取号表单提交
    function handleManualTicketSubmit(e) {
      e.preventDefault();
      
      const type = document.getElementById('ticket-type').value;
      const phone = document.getElementById('phone-number').value;
      
      // 在实际应用中，这里会发送API请求到后端获取新号码
      // 这里使用模拟数据
      const newCode = Math.max(...queueData.map(item => item.code)) + 1;
      const newItem = {
        "id": "manual-" + Date.now(),
        "code": newCode,
        "shopId": "002",
        "status": 0,
        "createdOn": new Date().toISOString(),
        "type": type,
        "date": parseInt(new Date().toISOString().split('T')[0].replace(/-/g, '')),
        "phone": phone,
        "userId": "",
        "alarmTimes": 0
      };
      
      queueData.unshift(newItem);
      showToast(`已成功生成新号码: ${type}-${newCode}`, 'success');
      closeManualTicketModal();
      applyFilters(); // 重新应用筛选器以刷新列表
      updateStatistics(); // 更新统计数据
    }

    // 应用筛选器
    function applyFilters() {
      const statusFilter = document.getElementById('status-filter').value;
      const typeFilter = document.getElementById('type-filter').value;
      
      let filteredData = [...queueData];
      
      if (statusFilter !== 'all') {
        filteredData = filteredData.filter(item => item.status.toString() === statusFilter);
      }
      
      if (typeFilter !== 'all') {
        filteredData = filteredData.filter(item => item.type === typeFilter);
      }
      
      renderQueueList(filteredData);
    }

    // 上一页
    function goToPrevPage() {
      // 在实际应用中，这里会处理分页逻辑
      showToast('已切换到上一页', 'info');
    }

    // 下一页
    function goToNextPage() {
      // 在实际应用中，这里会处理分页逻辑
      showToast('已切换到下一页', 'info');
    }

    // 显示提示消息
    function showToast(message, type = 'success') {
      const toast = document.getElementById('toast');
      const toastIcon = document.getElementById('toast-icon');
      const toastMessage = document.getElementById('toast-message');
      
      // 设置图标
      toastIcon.className = '';
      if (type === 'success') {
        toastIcon.className = 'fa fa-check-circle text-success';
      } else if (type === 'error') {
        toastIcon.className = 'fa fa-exclamation-circle text-danger';
      } else if (type === 'warning') {
        toastIcon.className = 'fa fa-exclamation-triangle text-warning';
      } else {
        toastIcon.className = 'fa fa-info-circle text-primary';
      }
      
      // 设置消息
      toastMessage.textContent = message;
      
      // 显示提示
      toast.classList.remove('translate-y-20', 'opacity-0');
      toast.classList.add('translate-y-0', 'opacity-100');
      
      // 3秒后隐藏
      setTimeout(() => {
        toast.classList.remove('translate-y-0', 'opacity-100');
        toast.classList.add('translate-y-20', 'opacity-0');
      }, 3000);
    }

    // 更新统计数据
    function updateStatistics() {
      const totalQueue = queueData.filter(item => item.status === 0 || item.status === 1).length;
      const processing = queueData.filter(item => item.status === 1).length;
      const completed = queueData.filter(item => item.status === 2).length;
      
      document.getElementById('total-queue').textContent = totalQueue;
      document.getElementById('processing').textContent = processing;
      document.getElementById('completed').textContent = completed;
      document.getElementById('total-count').textContent = queueData.length;
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
      renderQueueList(queueData);
      updateStatistics();
    });
  </script>
</body>
</html>